<template>
    <div class="box">
      <el-row>
        <el-col :span="24">
            <div class="header">
              <el-form
                ref="form"
                :model="form"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="付款单位">
                  <el-select
                    v-model="form.networkNameId"
                    placeholder="请选择付款单位"
                    style="width: 275px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
                  <!-- <el-date-picker
                  style="width: 650px"
                    v-model="Time"
                    type="daterange"
                    range-separator="至"
                    @change="mxDateChange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker> -->
                </el-form-item>
                <el-form-item label="救项性质">
                  <el-select
                    v-model="form.sheetType"
                    placeholder="请选择救项性质"
                    style="width: 275px"
                  >
                    <el-option label="丰巢面单费" value="丰巢面单费"></el-option>
                    <el-option label="惠惠商家寄面单费" value="惠惠商家寄面单费"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="摘要">
                  <el-select
                    v-model="form.sheetType"
                    placeholder="请选择摘要"
                    style="width: 275px"
                  >
                    <el-option label="丰巢面单费" value="丰巢面单费"></el-option>
                    <el-option label="惠惠商家寄面单费" value="惠惠商家寄面单费"></el-option>
                  </el-select>
                </el-form-item>
            
                <el-form-item>
                  <el-button type="primary" @click="getList">查询</el-button>
                  <el-button @click="mxClear">重置</el-button>
                  <el-button plain icon="el-icon-upload2">导出</el-button>

                </el-form-item>
               
               
              </el-form>
            </div>
        </el-col>
      </el-row>
  
      <el-row>
        <el-col :span="24">
          <div>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="networkSubjectFirst.firstCode"
                label="一级科目编码"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="networkSubjectFirst.firstName"
                label="一级科目"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column prop="secondCode" label="二级科目编码" width="120">
              </el-table-column>
              <el-table-column prop="secondName" label="二级科目" width="120">
              </el-table-column>
              <el-table-column prop="sysUser.createBy" label="创建人" width="120">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="120">
              </el-table-column>
              <el-table-column prop="name" label="操作" width="120">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <div class="block" style="display: flex; justify-content: end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  // import {
  //   getOutletsList,
  //   getSubjectFirstList,
  //   getSubjectList,
  //   subjectSearch,
  //   addSubject,
  // } from "@/api/dashboard";
  export default {
    data() {
      return {
        form: {
          networkNameId: "",
          firstId: "",
        },
        formLabelWidth: "120px",
        addForm: {
          networkNameId: "",
          firstId: "",
          secondName: "",
        },
        // 一级网点
        SubjectFirstList: [],
        //网点列表
        networkList: [],
        pages: {
          pageNum: 1,
          pageSize: 10,
        },
        total: 0,
        dialogFormVisible: false,
        currentPage4: 4,
        tableData: [],
        rules: {
          networkNameId: [
            { required: true, message: "请选择网点名称", trigger: "blur" },
          ],
          firstId: [
            { required: true, message: "请选择一级科目", trigger: "blur" },
          ],
          secondName: [
            { required: true, message: "请选择二级科目", trigger: "blur" },
          ],
        },
      };
    },
    created() {
      this.getList();
      this.getOutLet();
      this.getSubjectFirst();
    },
    methods: {
      // 获取网点列表
      getOutLet() {
        getOutletsList().then((res) => {
          if (res.code == 200) {
            this.networkList = res.data;
          }
        });
      },
      // 获取一级网点下拉框
      getSubjectFirst() {
        getSubjectFirstList().then((res) => {
          if (res.code == 200) {
            this.SubjectFirstList = res.data;
          }
        });
      },
      // 显示表格数据
      getList() {
        getSubjectList().then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.pages = res.data.pages;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        });
      },
      // 打开弹窗
      onSubmit() {
        this.dialogFormVisible = true;
      },
  
      // 查询
      search() {},
  
      // 重置
      clear() {
        this.form = {};
        this.getList();
      },
      handleSizeChange(val) {
        this.pages.pageSize = val;
        this.getList();
  
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pages.pageNum = val;
        this.getList();
        console.log(`当前页: ${val}`);
      },
      handleSelectionChange(val) {
        // this.multipleSelection = val;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .box {
    padding: 20px;
  }
  
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
  
  .flex-bettom {
    display: flex;
    justify-content: space-between;
  }
  
  .header {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  
  .el-row {
    margin-bottom: 20px;
  
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .el-col {
    border-radius: 4px;
  }
  
  .bg-purple-dark {
    background: #99a9bf;
  }
  
  .bg-purple {
    background: #d3dce6;
  }
  
  .bg-purple-light {
    background: #e5e9f2;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>
  